<template>
  <PageContainer>
    <view class="container">
      <Header title="合作意向" v-model="headerHeight" :is-box-shadow="false">
        <template>
          <view class="pa-16">
            <view class="fz-16 default-color font-bold mb-12"><text>关联供需</text></view>
            <view
              class="pa-12 disFlxAC br-8"
              @click="toSupplyDemandDetails"
              style="background-color: #f2f3f5"
            >
              <TImage
                v-if="routeOptions?.boType === BoTypeEnum.Supply"
                class="flex-shrink-0 mr-4"
                src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
                width="40rpx"
                height="40rpx"
              />
              <TImage
                v-else
                class="flex-shrink-0 mr-4"
                src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
                width="40rpx"
                height="40rpx"
              />
              <text class="fz-14 default-color flex-1 ov-1">{{ routeOptions?.title }}</text>
              <text class="ali-icon fz-16 ml-12" style="color: #969799">&#xe67b;</text>
            </view>
          </view>
          <CapsuleTabs v-model:current="current" :list="items" @change="onClickItem" />
        </template>
      </Header>
      <template v-if="routeOptions">
        <DataList
          v-show="current === 0 && routeOptions?.id"
          :header-height="headerHeight"
          :bo-info-id="routeOptions?.id"
          ref="dataListRef"
        />
        <StatisticsResult
          v-show="current === 1 && statisticsData.length"
          :id="routeOptions?.id"
          :dataList="statisticsData"
        />
      </template>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* intentionCooperation 合作意向(单个供需意向列表) */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import CapsuleTabs from '@/components/CapsuleTabs/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { reactive, ref } from 'vue';
  import DataList from './components/DataList.vue';
  import { onPageScroll, onShow } from '@dcloudio/uni-app';
  import StatisticsResult from './components/StatisticsResult/index.vue';
  import type { IntentionCooperation } from '@/router/types/modules';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { getByIdStatistics } from '@/api/businessOpportunities';
  import type { IGetByIdStatisticsResult } from '@/api/businessOpportunities/type';

  const items = reactive(['意向列表', '意向统计']);
  const current = ref<number>();
  const routeOptions = ref<IntentionCooperation>();
  const statisticsData = ref<IGetByIdStatisticsResult[]>([]);
  const headerHeight = ref(87);

  onLoad<'intentionCooperation'>(async (op) => {
    current.value = op.type === 'statistics' ? 1 : 0;
    routeOptions.value = op;
    statisticsData.value = await getByIdStatistics({ customFromId: op.id });
  });

  function toSupplyDemandDetails() {
    routeOptions.value?.id &&
      navigateTo({ name: 'supplyDemandDetails', options: { id: routeOptions.value?.id } });
  }

  const onClickItem = (index: number) => {
    uni.pageScrollTo({ scrollTop: 0, duration: 0 });
    current.value = index;
  };

  const dataListRef = ref<InstanceType<typeof DataList>>();



  onPageScroll(() => {});
</script>

<style lang="scss" scoped></style>
